<style scoped>
.ivu-table td.demo-table-info-column {
    background-color: #2db7f5;
    color: #fff;
}
</style>
<template>
    <div>
        <Card style="margin-bottom: 10px">
            <Form inline class="form-search">
                <FormItem>
                    <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="开始日期" :clearable="true"
                        v-model="sdate"></DatePicker>
                </FormItem>
                <FormItem>
                    <DatePicker style="width:150px" type="date" format="yyyy年MM月dd日" placeholder="结束日期" :clearable="true"
                        v-model="edate"></DatePicker>
                </FormItem>
                <FormItem> </FormItem>
                <FormItem>
                    <Button type="primary" @click="page = 1; SearchCustomerSaleOrders();" icon="md-search">查询</Button>
                </FormItem>

            </Form>
        </Card>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle"
            :data="tableData" :height="tableHeight"></Table>
        <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50]" @on-change="(s) => {
            page = s;
            SearchCustomerSaleOrders();
        }
            " @on-page-size-change="(p) => {
        size = p;
        page = 1;
        SearchCustomerSaleOrders();
    }
        " show-total show-sizer />
        <Modal width="1000" :styles="{ top: '20px' }" :footer-hide="true" v-model="modalData" title="处方单详情"
            :mask-closable="false" sticky draggable>
            <Saleorderedit v-if="modalData" :Id="tempDataId" :Type="tempType"></Saleorderedit>
        </Modal>
    </div>
</template>

<script>
import { SearchCustomerSaleOrders } from '@/api/saleorder'
import Saleorderedit from '../saleorder/saleorderedit.vue'
export default {
    name: 'customerSaleOrder',
    props: {
        Id: {
            type: String | Number,
            default: ''
        }
    },
    components: { Saleorderedit },
    data() {
        return {
            sdate: null,
            edate: null,
            total: 0,
            page: 1,
            size: 10,
            tableHeight: 400,
            status: -1,
            keyword: '',
            loadingTable: false,
            customerName: '',
            Extras: {},
            tableTitle: [
                {
                    type: 'index',
                    title: '序号',
                    align: 'center',
                    width: 60,
                    // render: (h, params) => {
                    //     return h('span', params.index + (this.page - 1) * this.size + 1)
                    // }
                    indexMethod: (params) => {
                        return params._index + (this.page - 1) * this.size + 1;
                    }
                },
                {
                    key: 'OrderNo',
                    title: '处方编号',
                    align: 'center',
                    render: (h, params) => {
                        return h(
                            'a',
                            {
                                style: {
                                    fontSize: '14px',
                                    textDecoration: 'underline'
                                },
                                on: {
                                    click: () => {
                                        let vm = this
                                        vm.tempDataId = params.row.Id
                                        vm.tempType = 1
                                        vm.modalData = true
                                    }
                                }
                            },
                            params.row.OrderNo
                        )
                    }
                },
                {
                    key: 'OrderDate',
                    title: '处方日期',
                    align: 'center',
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.OrderDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: 'AllFee',
                    title: '金额(元)',
                    align: 'center'
                }

            ],
            modalData: false,
            tempDataId: 0,
            tempType: 0,
            tableData: []
        }
    },
    computed: {},

    methods: {
        SearchCustomerSaleOrders() {
            let vm = this
            vm.loadingTable = true
            if (vm.sdate != null && vm.sdate != '') {
                if (vm.sdate === 'object') {
                    vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
                }
            }
            else {
                vm.sdate = null;
            }
            if (vm.edate != null && vm.edate != '') {
                if (vm.edate === 'object') {
                    vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
                }
            } else {
                vm.edate = null;
            }

            var reqData = {
                sdate: vm.sdate,
                edate: vm.edate,
                customerid: vm.Id,
                page: vm.page,
                size: vm.size
            }
            SearchCustomerSaleOrders(reqData).then((res) => {
                vm.loadingTable = false
                var data = res.data
                if (data.StatusCode == 200) {
                    vm.tableData = data.Data.Items
                    vm.total = data.Data.TotalCount
                } else {
                    vm.$Notice.error({
                        title: data.Errors
                    })
                }
            })
        }
    },
    mounted() {
        this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日')
        this.edate = this.dayjs().format('YYYY年MM月DD日')
        this.SearchCustomerSaleOrders()
    }
}
</script>

<style></style>
